<template>
	<div class="brand-list">
		<div class="brand-list-search">
			<u-search placeholder="请输入品牌名称" shape="square" v-model="keywords" :show-action="false"></u-search>
		</div>
		<div class="brand-list-content">
			<u-index-list class="brand-scroll-view" :scrollTop="scrollTop">
				<view class="brand-scroll-list" v-for="group in searchList" :key="group.key">
					<u-index-anchor :index="group.key" />
					<view class="brand-scroll-cell" v-for="brand in group.value" :key="brand.id" @click="handleSelect(brand)">
						<image class="brand-scroll-cell__logo" :lazy-load="true" :src="brand.logo_image" mode="aspectFit"></image>
						<view class="brand-scroll-cell__name">{{brand.name}}</view>
					</view>
				</view>
			</u-index-list>
		</div>
	</div>
</template>

<script>
	import {brandsList} from '../../apis/used-car/api.js';
	export default{
		name:'BrandList',
		data(){
			return {
				keywords:'',
				scrollTop:0,
				brandList:[]
			}
		},
		computed:{
			searchList(){
				return this.keywords ? this.brandList.reduce((acc,{key,value})=>{
					const list = value.filter(item=>item.name.includes(this.keywords))
					return list.length ? [...acc,{key,value:list}]:acc
				},[]) : this.brandList
			}
		},
		methods:{
			async getBrandList(){
				const {code,msg,data} = await brandsList()
				this.brandList = Object.entries(data.brands).map(([key,value])=>({key,value}))
			},
			handleSelect(brand){
				uni.$emit('brand-change',brand)
				uni.navigateBack()
			}
		},
		onLoad(){
			this.getBrandList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss" scoped>
	.brand-list-search{
		padding: 30rpx;
	}
	.brand-scroll-cell{
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		&+&{
			box-shadow: 0 -1rpx 0.5rpx -1rpx #CCCCCC;
		}
		&__logo{
			width: 65rpx;
			height: 65rpx;
			padding: 0 30rpx;
		}
		&__name{
			font-size: 33rpx;
			font-weight: 400;
		}
	}
</style>
